<template>
  <div class="StoreDetail">
    <div class="ele-tiele">
      <h4>门店详情</h4>
      <el-button
        type="text"
        @click="
          $router.push({
            name: 'EditShopStore',
            query: {
              p: $ed({
                state:'edit',
                storeId:storeId
              })
            }
          })
        "
      >编辑信息</el-button>
    </div>
    <div class="ele-div-1">
      <div class="ele-left">
        <p>
          <span>门店名称:</span><span>{{ infoData.storeName }}</span>
        </p>
        <p>
          <span>营业时间:</span><span><i class="el-icon-date icon-cutoms" />{{
            infoData.businessTime
          }}</span>
        </p>
        <p class="mddz">
          <span>门店地址:</span><span class="address">{{ infoData.address }}</span>
        </p>
      </div>
      <div class="ele-right">
        <p class="lefts">
          <span>管理员:</span><span>{{ infoData.userName }}</span>
        </p>
        <p class="rights">
          <span>联系方式:</span><span>{{ infoData.phone }}</span>
        </p>
        <div class="rights">
          <p style="justify-content: center">门店二维码</p>
          <div id="qrCode" ref="qrCodeDiv" />
        </div>
      </div>
    </div>
    <div class="ele-div-2">
      <el-tabs v-model="activeName">
        <el-tab-pane label="商品" name="CommodityTabs">
          <CommodityTabs ref="commodityTabs" :store-id="storeId" :store-info="infoData" />
        </el-tab-pane>
        <el-tab-pane label="控制器" name="ContorlTabs">
          <ControlTabs ref="controlTabs" :store-id="storeId" />
        </el-tab-pane>
        <el-tab-pane label="RFID设备" name="RFIDTabs">
          <RFIDTabs :store-id="storeId" />
        </el-tab-pane>
        <el-tab-pane label="医柜锁" name="MedicalTabs">
          <MedicalTabs :store-id="storeId" />
        </el-tab-pane>
        <el-tab-pane label="员工管理" name="UserManagementTabs">
          <UserManagementTabs :store-id="storeId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/** 门店详情 */
import CommodityTabs from './../component/CommodityTabs.vue'
import ControlTabs from './../component/ControlTabs.vue'
import RFIDTabs from './../component/RFIDTabs.vue'
import MedicalTabs from './../component/MedicalTabs.vue'
import UserManagementTabs from './../component/UserManagementTabs.vue'
import { storeDetail } from '@/api/customAPI/shop/store'
import QRCode from 'qrcodejs2'
export default {
  name: 'StoreDetail',
  components: {
    CommodityTabs,
    ControlTabs,
    RFIDTabs,
    MedicalTabs,
    UserManagementTabs
  },
  data() {
    return {
      storeId: '',
      activeName: 'CommodityTabs',
      infoData: {}
    }
  },
  created() {

  },
  mounted() {
    this.getSoreList()
  },
  methods: {
    getSoreList() {
      const params = this.$dd(this.$route.query.p)
      this.storeId = params.storeId
      storeDetail({ storeId: params.storeId })
        .then(result => {
          this.infoData = result.data.data
          this.bindQRCode(this.infoData.id)
          /* localStorage.setItem('storeInfo', JSON.stringify(this.infoData))*/
        })
        .catch(err => {
          this.$message.warning(err)
        })
    },
    bindQRCode: function(id) {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'https://qrc.ejiakanghu.cn/qrcode/store?id=' + id,
        width: 100,
        height: 100,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
      })
    }
  }
  /* beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getSoreList()
    })
  }*/
}
</script>

<style lang="scss" scoped>
.StoreDetail {
  padding: 50px 100px;
  .ele-tiele {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ele-div-1 {
    border-radius: 5px;
    background: #f3f3f3;
    padding: 20px 0px;
    width: 100%;
    display: flex;
    padding-left: 40px;
    position: relative;
    flex-wrap: wrap;
    .ele-button {
      position: absolute;
      right: 40px;
    }
    .ele-left {
      p {
        padding: 10px 0px;
        span:last-child {
          margin-left: 30px;
        }
        .icon-cutoms {
          color: rgb(0, 182, 0);
        }
      }
      .mddz {
        display: flex;
        align-items: flex-start;
      }
      .address {
        display: inline-block;
        width: 500px;
      }
    }
    .ele-right {
      width: 50%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      p {
        display: flex;
        align-items: flex-start;
        span {
          display: inline-block;
          width: 100px;
        }
      }
    }
    .ele-middle {
      p {
        display: flex;
        align-items: flex-start;
      }
    }
  }
  .ele-div-2 {
    width: 100%;
    margin-top: 40px;
  }
}
</style>
